<script lang="ts" setup>
import { Plus, InfoFilled } from '@element-plus/icons-vue';
import { RequestParamConfig, Required, TableCellBtn } from '../../../utils/types';
import { RULE_HELP, UiCellBtns } from '../../../utils';
import { useParamConfig } from '../utils';

const cls = 'ui-api-editor-request-param-config'

const props = defineProps<{
  isTree?: boolean,
  modelValue: RequestParamConfig[]
}>()

const { dataTypes, addItem, addSubItem, removeItem, disableType, canAddChild } = useParamConfig(props)

const getBtns = (row: RequestParamConfig) => {
  return [
    canAddChild(row) && { label: '添加', onClick: addSubItem.bind(null, row) },
    { label: '删除', onClick: removeItem.bind(null, row) }
  ] as TableCellBtn[]
}
</script>

<template>
  <div :class="cls">
    <ElTable :data="modelValue" row-key="_k" default-expand-all :tree-props="{ children: 'childrenApiParams' }">
      <ElTableColumn min-width="180">
        <template #header>
          <span class="star">*</span>参数名
        </template>
        <template v-slot="{ row }">
          <ElInput v-model="row.param" placeholder="请输入" />
        </template>
      </ElTableColumn>
      <ElTableColumn min-width="120">
        <template #header>
          <span class="star">*</span>类型
        </template>
        <template v-slot="{ row }">
          <ElSelect v-model="row.paramType" :disabled="disableType(row)">
            <ElOption v-for="_ in dataTypes" :key="_.value" v-bind="_" />
          </ElSelect>
        </template>
      </ElTableColumn>
      <ElTableColumn label="校验规则" min-width="120">
        <template #header>
          <div :class="`${cls}_title`">
            <span :class="`${cls}_title-text`">校验规则</span>
            <ElTooltip
              effect="light"
              placement="right"
              :popper-class="`${cls}_popper`"
              :content="RULE_HELP">
              <ElIcon>
                <InfoFilled />
              </ElIcon>
            </ElTooltip>
          </div>
        </template>
        <template v-slot="{ row }">
          <ElInput v-model ="row.paramRule" placeholder="请输入" />
        </template>
      </ElTableColumn>
      <ElTableColumn label="必填" width="60">
        <template v-slot="{ row }">
          <ElCheckbox v-model="row.isRequired" :true-value="Required.YES" :false-value="Required.NO"/>
        </template>
      </ElTableColumn>
      <ElTableColumn label="默认值" min-width="120">
        <template v-slot="{ row }">
          <ElInput v-model="row.defaultValue" placeholder="请输入" />
        </template>
      </ElTableColumn>
      <ElTableColumn label="示例" min-width="120">
        <template v-slot="{ row }">
          <ElInput v-model="row.example" placeholder="请输入" />
        </template>
      </ElTableColumn>
      <ElTableColumn label="描述" min-width="120">
        <template v-slot="{ row }">
          <ElInput v-model="row.desc" placeholder="请输入" />
        </template>
      </ElTableColumn>
      <ElTableColumn label="操作" width="100" fixed="right">
        <template v-slot="{ row }">
          <UiCellBtns :btns="getBtns(row)" />
        </template>
      </ElTableColumn>
    </ElTable>
    <div :class="`${cls}_actions`">
      <ElButton :icon="Plus" type="primary" plain @click="addItem">添加一行</ElButton>
    </div>
  </div>
</template>

<style lang="scss">
.ui-api-editor-request-param-config {
  &_actions {
    width: 100%;
    margin-top: $page-padding;
    text-align: center;
  }
  &_title {
    display: flex;
    align-items: center;
    &-text {
      margin-right: 3px;
    }
  }
  &_popper {
    max-width: 340px;
  }
  .star {
    margin-right: 4px;
    color: var(--el-color-danger);
  }
}
</style>
